<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">

// 1.创建虚拟DOM,此处一定不要加引号，因为不是字符串
// const VDOM = <h1>hello,react</h1>

const myId = 'CONTENT'
const content = "HELLOREACT"
const VDOM = (
  <h1 id={myId.toLowerCase()}>
    <span style={{backgroundColor: 'red'}}>{content.toLowerCase()}</span>
  </h1>
)

/*
    jsx语法规则:
      1.定义虚拟dom时，不要写引号
      2.标签中混入js表达式要用花括号
      3.样式的类名指定不要用class，用className,第一个花括号表示我要用js里面写表达式了，第二个花括号表示我写的是一个对象
      4.虚拟dom只有一个根标签
      5.只有一个根标签
      6.标签必须闭合
      7.标签首字母若小写字母开头则将该标签转为html同名元素，若html无同名元素则报错。若大写字母开头react就去渲染对应的组件，若组件没有定义就报错
      
*/
ReactDOM.render(
	VDOM,
	document.getElementById('example')
);
</script>

</body>
</html>